<template>
    <div>
        <br/>

        <el-form :inline="true" :model='searchForm' ref="aForm">
                <el-form-item label='问题内容' prop='questionContent'>
                    <el-input v-model="searchForm.questionContent"></el-input>
                </el-form-item>

                <el-form-item label='状态' prop='status'>
                    <el-select  v-model="searchForm.status">
                        <el-option 
                        v-for="item in opt" 
                        :key="item.value" 
                        :label='item.label' 
                        :value='item.value'>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="getData">搜索</el-button>
                </el-form-item>
        </el-form>

        <el-button @click="btnAdd">新增</el-button>

        <el-dialog title="增加/更新" :visible.sync='playAdd'>

         <el-form :model='FormData' ref='asd' label-width='100px'>
            <el-form-item prop='questionContent' label='问题内容'>
                <el-input v-model="FormData.questionContent"></el-input>
            </el-form-item>
            <el-form-item prop='questionAnswer' label='问题回复'>
                <el-input v-model="FormData.questionAnswer"></el-input>
            </el-form-item>
            <el-form-item prop='status' label='状态'>
                <el-input v-model="FormData.status"></el-input>
            </el-form-item>
            <!-- <el-form-item>
                <el-button @click="getAdd">增加</el-button>
            </el-form-item> -->
         </el-form>

         <div slot="footer">
             <el-button @click="getAdd">确定</el-button>
             <el-button @click="btnClose">取消</el-button>
         </div>
        </el-dialog>

        <!-- <el-form :model='FormData' ref='asd' label-width='100px'>
            <el-form-item prop='questionContent' label='问题内容'>
                <el-input v-model="FormData.questionContent"></el-input>
            </el-form-item>
            <el-form-item prop='questionAnswer' label='问题回复'>
                <el-input v-model="FormData.questionAnswer"></el-input>
            </el-form-item>
            <el-form-item prop='status' label='状态'>
                <el-input v-model="FormData.status"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getAdd">增加</el-button>
            </el-form-item>
        </el-form> -->

        <el-table :data='tableData'>
            <el-table-column label='问题id' prop='questionId'></el-table-column>
            <el-table-column label='问题内容' prop='questionContent'></el-table-column>
            <el-table-column label='问题回复' prop='questionAnswer'></el-table-column>
            <el-table-column label='状态' prop='status'></el-table-column>
             <el-table-column label='操作'>
                 <template slot-scope="scope">
                     <el-button @click="btnedit(scope.row)">编辑</el-button>
                     <el-button @click="btnDelete(scope.row)">删除</el-button>
                     <!-- <el-button @click="getPut(scope.row)">更新</el-button> -->
                 </template>
             </el-table-column>
        </el-table>

        <el-pagination 
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="pageIndex"
           :page-sizes="[10,20,30,50,100]"
           :page-size="pageSize"
           background
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
        </el-pagination>

        <!-- <el-dialog title="创建" :visible.sync='dialogFromVisible'>
            <el-form label-width='50px' >
                <el-form-item label='问题'>
                    <el-input></el-input>
                </el-form-item>

                <el-from-item label='回复'>
                    <el-input type='textarea'></el-input>
                </el-from-item>

                <el-form-item label='状态'>
                    <el-select v-model="value" placeholder="选择状态">
                        <el-option   
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm">确定</el-button>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            dialogFromVisible:false,
            playAdd:false,
            tableData:[],
            pageIndex:1,
            pageSize:10,
            distype:'',
            options:[
                {
                    value:'1',
                    label:'启用'
                },
                {
                    value:'2',
                    label:'禁用'
                }
            ],
            opt:[
                {
                    value:'1',
                    label:1
                },
                {
                    value:'2',
                    label:2
                }
            ],
            value: '',
            total:0,
            searchForm:{
                questionContent:'',
                status:''
            },
            FormData:{
                questionContent:'',
                questionAnswer:'',
                status:''
            }
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        btnAdd(){
            this.distype='add'
            this.playAdd=true
        },
        btnedit(row){
            this.distype='edit'
            this.playAdd=true
            this.FormData={...row}
        },
        cancel(){
            this.dialogFromVisible=false   
        },
        confirm(){
            this.dialogFromVisible=false
        },
        getData(){
            axios.get('http://127.0.0.1:3000/api/test/crud/list',{
                params:{
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    questionContent:this.searchForm.questionContent,
                    status:this.searchForm.status
                }
            }).then(res=>{
                console.log(res)
                this.tableData=res.data.data
                this.total=res.data.total
            })
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageIndex=val
        this.getData()
         },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageSize=val
        this.getData
        },
        reset(){
            this.$refs.aForm.resetFields()
            this.getData()
        },
        btnDelete(row){
            axios.delete('http://127.0.0.1:3000/api/test/crud/delete',{
                params:{questionId:row.questionId}
            }).then(res=>{
                this.getData()
            })
        },
        getAdd(){
            if(this.distype ==='add'){
                axios.post('http://127.0.0.1:3000/api/test/crud/add',{...this.FormData}).then(res=>{
                this.getData()
                this.$refs.asd.resetFields()
                this.playAdd=false
            })
            }else if(this.distype === 'edit'){
                axios.put('http://127.0.0.1:3000/api/test//crud/update',{questionId:row.questionId,...this.FormData }).then(res=>{
                this.getData()
                this.$refs.asd.resetFields()
                 this.playAdd=false
            })
            }
        },
        btnClose(){
            this.$refs.asd.resetFields()
            this.playAdd=false
        },
    }
}
</script>